<template>
  <div id="messageList" class="message-list">
    <group v-if="+msgType === 1">
      <cell :class="{ 'red-spot': isAdd }" title="系统消息标题"  inline-desc="后台配置系统消息发送"></cell>
      <cell v-if="msgList.length > 0 && userRole==='renter'" v-for="(item, index) in msgList" :key="index" title="预约看房提醒" :inline-desc="item.content" :value="item.createTime"></cell>
      <cell v-if="msgList.length > 0 && userRole==='landlord'" v-for="(item, index) in msgList" :key="index" title="待看行程提醒" :inline-desc="item.content" :value="item.createTime"></cell>
    </group>
    <no-data v-else><span slot="message">{{ msg }}</span></no-data>
  </div>
</template>
<script>
  import { Group, Cell } from 'vux'
  import noData from '@/components/noData'
  export default {
    name: 'messageList',
    components: {
      Group,
      Cell,
      noData
    },
    data () {
      return {
        userRole: '',
        msgType: '',
        msgList: [],
        msg: '',
        isAdd: true,
        msgListLandlorYY: [],
        msgListRenterYY: []
      }
    },
    created () {
      this.userRole = this.$route.params.userRole
      this.msgType = this.$route.params.type
      let reqUrl = ''
      switch (this.userRole) {
        case 'renter': reqUrl = this.$api.myNewsForRenter; break
        case 'landlord': reqUrl = this.$api.myNewsForLandlord; break
      }
      this.getMsgList(reqUrl)
    },
    methods: {
      getMsgList (reqUrl) {
        this.$axiosGeting(reqUrl, {
          userId: JSON.parse(localStorage.getItem('userInfo')).id || '',
          type: this.msgType,
          page: 1,
          pageSize: 1000
        }).then(json => {
          if (json.code === '0000' && json.data && json.data.length > 0) {
            this.msgList = json.data
          } else {
            switch (this.msgType) {
              case '1': this.msg = '您还没有预约消息哦'; break
              case '2': this.msg = '您还没有房屋消息哦'; break
              case '3': this.msg = '您还没有账单消息哦'; break
            }
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .message-list {
    // .weui-cells {
    //   margin-top: 0;
    //   .weui-cell {
    //     padding: .75rem .6rem .5rem;
    //   }
    // }
    // .vux-cell-bd {
    //   span {
    //     margin-top: .8rem;
    //     float: right;
    //   }
    // }
    .weui-cells {
      margin-top: 0;
    }
    .weui-cell__ft {
      text-align: right;
      color: #000;
      font-size: 12px;
      position: absolute;
      right: 15px;
      top: 20px;
    }
    .vux-cell-primary {
      padding-bottom: 5px;
    }
    .vux-label {
      margin: 5px 0 5px;
    }
    .red-spot {
      .vux-label {
        position: relative;
        display: inline-block;
        &:after {
          content: '';
          position: absolute;
          display: block;
          width: 6px;
          height: 6px;
          background-color: #f74c31;
          border-radius: 5px;
          right: -10px;
          top: 5px;
        }
      }
    }
  }
</style>
